<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flask Element UI Example</title>
    <!-- 引入Element UI的CSS -->
    <link rel="stylesheet" href="../static/element/elementui.css">
</head>
<body>
    <div id="app">
        <el-table :data="people" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="handleClickB(scope.row)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 引入Vue -->
    <script src="../static/element/vue.js"></script>
    <!-- 引入Element UI的JS -->
    <script src="../static/element/elementui.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                people: {{ data | tojson }}
            },
             methods: {
              handleClick(row) {
                console.log("查看:", row);
              },
              handleClickB(row) {
                console.log("编辑:", row);
              },
            },
        });
    </script>
</body>
</html>